import styled from "styled-components";
import Ispass from '@/assets/img/icon.png'
export const RegisterWrapper = styled.div`
    display:${props=>props.phone===10086?"flex":"none"};
    flex-direction:column;
    justify-content:center;
    align-items:center;
    .ant-form-item-required{
        font-size:12px;
        color:#666;
    }
    .ant-form-horizontal{
        margin-bottom:30px;
    }
    .ant-form-item-control-input-content{
        display:flex;
        justify-content:space-between;
    }
    .ant-input{
        width:220px;
    }
    .ant-input-password{
        width:220px;
    }
    .ant-btn-primary{
        width:220px;
        margin-bottom:20px;
        font-size:12px;
        color:#bebebe;
        border-color:#EEEEEE;
        border-radius:6px;
    }
    .footer{
        position:absolute;
        bottom:0;
        width:100%;
        height:49px;
        font-size:12px;
        color:#0c72c3;
        line-height:49px;
        background-color: #f7f7f7;
        padding-left:20px;
        cursor:pointer;
      }
       input[type=number] {
        -moz-appearance:textfield;
       }
       input[type=number]::-webkit-inner-spin-button,
       input[type=number]::-webkit-outer-spin-button {
       -webkit-appearance: none;
          margin: 0;
        }
        .rule{
            font-size:12px;
            margin-top:-15px;
            color:#e33232;
            margin-bottom:10px;
            }
            .rule-item{
                display:flex;
                align-items:center;
                margin-bottom:8px;
                i{
                display:inline-block;
                margin-right: 8px;
                width: 14px;
                height:14px;
                background:url(${Ispass}) no-repeat -50px -270px;
             }
            }
            .rule-item2{
                display:${props=>props.isPass===2?"block":"none"};
            }
            .rule-item3{
                display:${props=>props.isPass===3?"block":"none"};
            }
            .rule-item4{
                display:${props=>props.isPass===4?"block":"none"};
            }
`
export const QRCode = styled.div`
      width:220px;
      margin:0 auto;
      display:${props=>props.phone===10086?"none":"flex"};
      flex-direction:column;
      justify-content:center;
      align-items:center;
      .content{
          width:220px;
          justify-self:flex-start;
          font-size:12px;
          color:#666;
          strong{
              font-weight:bold;
              color:#333;
              margin-left:6px;
          }
      }
      .code{
          display:flex;
          margin-top:20px;
          .c-word{
              flex:1;
          }
      }
      input[type=number] {
        -moz-appearance:textfield;
       }
       .next{
           width:100%;
           margin-top:10px;
           margin-bottom:50px;
       }
       .resend{
        width:100%;
        display:flex;
        justify-content: flex-end;
        margin-top: 6px;
        margin-right: 5px;
        color: #0C73C2;
        font-size: 12px;
        line-height: 18px;
        p{
            display:${props=>props.isCountDown?"none":"block"};
            cursor:pointer;
        }
       }
       input[type=number]::-webkit-inner-spin-button,
       input[type=number]::-webkit-outer-spin-button {
       -webkit-appearance: none;
          margin: 0;
        }
        .footer{
        position:absolute;
        bottom:0;
        width:100%;
        height:49px;
        font-size:12px;
        color:#0c72c3;
        line-height:49px;
        background-color: #f7f7f7;
        padding-left:20px;
        cursor:pointer;
      }
      .ant-statistic-content-value{
          display:${props=>props.isCountDown?"block":"none"};
          font-size:12px;
          color:#0C73C2;
      }
`